<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery UI Accordion</title>
<link rel="stylesheet" href="css/menu.css" />
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="lib/jquery.easing.js"></script>
<script type="text/javascript" src="lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="lib/jquery.accordion.js"></script>
<script type="text/javascript">
	jQuery().ready(function(){
		// simple accordion
		jQuery('#list1').accordion();
		
		//jQuery('#list1').accordion({
		//	autoheight: false
		//});
		
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		//var accordions = jQuery('#list1');
		
		//jQuery('#switch select').change(function() {
		//	accordions.accordion("activate", this.selectedIndex-1 );
		//});
		//jQuery('#close').click(function() {
		//	accordions.accordion("activate", -1);
		//});
		//jQuery('#switch2').change(function() {
		//	accordions.accordion("activate", this.value);
		//});
		//jQuery('#enable').click(function() {
		//	accordions.accordion("enable");
		//});
		//jQuery('#disable').click(function() {
		//	accordions.accordion("disable");
		//});
		//jQuery('#remove').click(function() {
		//	accordions.accordion("destroy");
		//	wizardButtons.unbind("click");
		//});
	});
	
	function go(id){
		//alert("hello"+id);
		window.forward("");
	}
	</script>
</head>
<body>
<div id="main">
  <div class="basic" id="list1">
    <a onclick="go(1);">There is one...</a>
    <div>
      <p class="p-first"> get two for three beer. </p>
      <p class="p-centers"> And now, for something </p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> More&gt;&gt;&gt;&gt;</p>
    </div>
    <a onclick="go(2);">There is two...</a>
    <div>
      <p class="p-first"> get two for three beer. </p>
      <p class="p-centers"> And now, for something </p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> More&gt;&gt;&gt;&gt;</p>
    </div>
    <a onclick="go(3);">There is thr...</a>
    <div>
      <p class="p-first"> get two for three beer. </p>
      <p class="p-centers"> And now, for something </p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> More&gt;&gt;&gt;&gt;</p>
    </div>
    <a onclick="go(4);">There is more...</a>
     <div>
      <p class="p-first"> get two for three beer. </p>
      <p class="p-centers"> And now, for something </p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> And now, for something5</p>
      <p class="p-last"> More&gt;&gt;&gt;&gt;</p>
    </div>
  </div>
  <a onclick="go(5);">There is more...</a>
</div>
</body>
</html>